<template>
  <div class="r-people-box page-miH page-bgBack">
    <a-tabs v-model="status" @change="callback">
      <a-tab-pane :key="item.type" v-for="item in numArr">
        <span slot="tab">
          <a-badge :count="item.num" :offset="[5, -2]">{{ item.name }}</a-badge>
        </span>
      </a-tab-pane>
    </a-tabs>
    <a-row type="flex" align="middle" justify="space-between">
      <a-col>
        <a-input-search
          allowClear
          v-model="jobSeekerName"
          placeholder="搜索求职者姓名"
          style="width: 180px"
          class="mr12"
          @search="onSearch"
        />
        <a-select v-model="sourceType" allowClear placeholder="求职者/经纪人/内推" style="width: 180px" @change="handleChange">
          <a-select-option value="1">求职者</a-select-option>
          <a-select-option value="2">经纪人</a-select-option>
          <a-select-option value="3">内推</a-select-option>
        </a-select>
      </a-col>
      <a-col>
        <!-- <div v-if="status === '1'">
          <a-button type="primary" @click="onAddPeople">
            新建投递人
          </a-button>
        </div>-->
        <!-- <div>
          <a-button type="primary" :disabled="!selectedRowKeys.length" @click="onNoteAll"> 发送短信 </a-button>
        </div>-->
      </a-col>
    </a-row>
    <div class="xq-form-wrapper mt24">
      <a-spin :spinning="spinning" class="xq-form-content" style="margin-top: 8px">
        <a-table
          :scroll="{ x: columns.length * 150 }"
          :pagination="false"
          :bordered="false"
          :dataSource="tableData"
          :columns="columns"
          :rowClassName="rowClass"
          :row-key="rkFun"
          :showHeader="false"
        >
          <!-- :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" -->
          <!-- eslint-disable-next-line prettier/prettier -->
          <template v-for="(col, index) in columns" v-slot:[col.dataIndex]="text, record">
            <div :key="index">
              <div v-if="col.dataIndex === 'name'">
                <div class="table-name">
                  <div>
                    <a-tooltip placement="top">
                      <template slot="title" v-if="record.postName">
                        <span>{{ record.postName }}</span>
                      </template>
                      <div class="overflowsPeople">
                        <span style="cursor: pointer">应聘职位：{{ record.postName }}</span>
                      </div>
                    </a-tooltip>
                    {{ record.deliverGmtCreate ? moment(record.deliverGmtCreate).format("YYYY-MM-DD HH:mm") : "" }}
                  </div>
                </div>
                <div class="table-desc tdisplay">
                  <div class="l">
                    <a-list-item-meta :description="record.address || ''">
                      <span slot="title">
                        <a-tooltip placement="top">
                          <template slot="title" v-if="record.name">
                            <span>{{ record.name }}</span>
                          </template>
                          <div class="overflowsName" style="font-size: 18px">{{ record.name }}</div>
                        </a-tooltip>
                        <!-- <span style="font-size: 18px;">{{ record.name }}</span> -->
                        <a-popover placement="right" v-if="record.sourceType === 'broker'">
                          <template slot="content">
                            <p>经纪人：{{ record.principalName }}</p>
                            <p>日期：{{ moment(record.deliverGmtCreate).format("YYYY-MM-DD") }}</p>
                          </template>
                          <div class="title-s-j">经纪人</div>
                        </a-popover>
                        <a-popover placement="right" v-if="record.sourceType === 'emp'">
                          <template slot="content">
                            <p>内推人：{{ record.principalName }}</p>
                            <p>日期：{{ moment(record.deliverGmtCreate).format("YYYY-MM-DD") }}</p>
                          </template>
                          <div class="title-s-n">内推</div>
                        </a-popover>
                        <!-- <span class="title-s-j" v-if="record.sourceType === 'broker'">经纪人</span>
                        <span class="title-s-n" v-if="record.sourceType === 'emp'">内推</span>-->
                      </span>
                      <a-avatar slot="avatar" v-if="record.avatar" :src="record.avatar" style="width: 42px; height: 42px" />
                      <a-avatar v-if="!record.avatar && record.gender === 1" slot="avatar" :src="n1" style="width: 42px; height: 42px" />
                      <a-avatar v-if="!record.avatar && record.gender === 2" slot="avatar" :src="n2" style="width: 42px; height: 42px" />
                    </a-list-item-meta>
                  </div>
                  <div class="tags pt10">
                    <div v-for="(item, index) in record.skill" :key="index">
                      <a-tooltip placement="top">
                        <template slot="title">
                          <span>{{ item }}</span>
                        </template>

                        <div class="tags-item overflowsTags">{{ item }}</div>
                      </a-tooltip>
                    </div>
                  </div>
                </div>
              </div>
              <div v-if="col.dataIndex === 'createUserName'">
                <a-tooltip placement="top">
                  <template slot="title" v-if="record.createUserName">
                    <span>{{ record.createUserName }}</span>
                  </template>

                  <div class="table-desc pt10 overCreate">创建来源：{{ record.createUserName }}</div>
                </a-tooltip>
              </div>
              <div v-if="col.dataIndex === 'status'">
                <div class="table-desc pt10">
                  状态：
                  <span v-if="record.status == 1">已投递</span>
                  <span v-if="record.status == 2">已约面</span>
                  <span v-if="record.status == 3">待入职</span>
                  <span v-if="record.status == 4">已招聘</span>
                  <span v-if="record.status == 5">简历不合适</span>
                  <span v-if="record.status == 6">面试已拒绝</span>
                  <span v-if="record.status == 7">面试不合适</span>
                  <span v-if="record.status == 8">放弃入职</span>
                  <span v-if="record.status == 9">取消面试</span>
                </div>
              </div>
              <div v-if="col.dataIndex === 'remark'">
                <a-tooltip placement="top">
                  <template slot="title" v-if="record.remark">
                    <span>{{ record.remark }}</span>
                  </template>
                  <div class="table-desc pt10 overflowsRemak">备注：{{ record.remark }}</div>
                </a-tooltip>
              </div>
              <div v-if="col.dataIndex === 'tableAction'" style="margin-top: 56px">
                <a @click.stop="rowclick(record)">人员信息</a>
                <span v-if="status === '1'">
                  <a-divider type="vertical" />
                  <a @click.stop="onAdd(record)">安排面试</a>
                </span>
                <span v-if="record.status != '1' && record.status != '5'">
                  <a-divider type="vertical" />
                  <a @click.stop="onMsg(record)">面试详情</a>
                </span>
                <span v-if="status === '3'">
                  <a-divider type="vertical" />
                  <a @click.stop="onInterview(record.deliverRecordId, record.companyUnitId)">进入已招聘</a>
                </span>
                <span v-if="status === '1' || status === '3'">
                  <a-divider type="vertical" />
                  <a @click.stop="deleteRecord(record.deliverRecordId, record.companyUnitId)">{{
                    status === "3" ? "放弃入职" : "不合适"
                  }}</a>
                </span>
                <span v-if="status === '5'">
                  <a-divider type="vertical" />
                  <a @click.stop="onAdd(record)">重新发起面试</a>
                </span>
              </div>
            </div>
          </template>
        </a-table>

        <div class="xq-form-content-pagination">
          <div class="xq-form-content-pagination-total">共 {{ total }} 条</div>
          <a-pagination
            v-model="pageNo"
            :page-size="pageSize"
            :total="total"
            :show-size-changer="true"
            :show-quick-jumper="true"
            :page-size-options="['10', '20', '50', '100']"
            @change="onPageChange"
            @showSizeChange="onPageSizeChange"
          />
        </div>
      </a-spin>
    </div>
    <drawer
      :visible.sync="drawerVisible"
      :talentPoolId="talentPoolId"
      :companyUnitsInfo="companyUnitsInfo"
      :deliverRecordId="deliverRecordId"
      :status="status"
      :mjson="mjson"
      @onMsg="interviewDrawerVisible = true"
      @onAction="onAction"
      @onShare="onShare"
    />
    <interviewDrawer
      :visible.sync="interviewDrawerVisible"
      :deliverRecordId="deliverRecordId"
      :talentPoolId="talentPoolId"
      :mjson="mjson"
      @onShare="onShare"
    />
    <interview
      :visible.sync="interviewVisible"
      :deliverRecordId="deliverRecordId"
      :talentPoolId="talentPoolId"
      :mjson="mjson"
      @onShare="onShare"
    />
    <share :visible.sync="visibles" :qrCodeUrlV="qrCodeUrlV" />
    <interviewMsg
      :visible.sync="interviewMsgVisible"
      :interviewId="interviewId"
      :info="info"
      :status="statusMsg"
      @onEvaluate="onEvaluate"
      @onCloseInterview="onCloseInterview"
    />
    <evaluate
      :visible.sync="evaluateVisible"
      :evaluateId="evaluateId"
      :recruitInfoId="recruitInfoId"
      :companyUnitsId="companyUnitsId"
      @upDate="onGetPageJobSeekerByStatus"
    />
    <note :visible.sync="noteVisible" />
  </div>
</template>

<script>
import moment from "moment";
import drawer from "./component/drawer";
import interviewDrawer from "./component/interview";
import interview from "./component/interview";
import interviewMsg from "./component/interviewMsg";
import evaluate from "./component/evaluate";
import share from "../component/share";
import note from "./component/note";

import { getPageJobSeekerByStatus, putDeliverRecords } from "./api";
export default {
  components: {
    drawer,
    interviewDrawer,
    interview,
    share,
    interviewMsg,
    evaluate,
    note
  },
  data() {
    return {
      pageRecruitInfoId: "",
      drawerVisible: false,
      interviewDrawerVisible: false,
      interviewVisible: false,
      visibles: false,
      interviewMsgVisible: false,
      evaluateVisible: false,
      noteVisible: false,
      interviewId: "",
      info: {},
      companyUnitsInfo: {},
      deliverRecordId: "",
      talentPoolId: "",
      evaluateId: "",
      recruitInfoId: "",
      companyUnitsId: "",
      qrCodeUrlV: "",
      status: "1",
      statusMsg: "",
      numArr: [
        // { type: "0", name: "待处理", num: 5 },
        { type: "1", name: "已投递", num: 0 },
        { type: "2", name: "已约面", num: 0 },
        { type: "3", name: "待入职", num: 0 },
        { type: "4", name: "已招聘", num: 0 },
        { type: "5", name: "未通过", num: 0 }
      ],
      columns: [
        {
          title: "名次",
          dataIndex: "name",
          scopedSlots: { customRender: "name" }
        },
        {
          title: "创建人",
          dataIndex: "createUserName",
          scopedSlots: { customRender: "createUserName" }
        },
        {
          title: "状态",
          dataIndex: "status",
          scopedSlots: { customRender: "status" }
        },
        {
          title: "备注",
          dataIndex: "remark",
          scopedSlots: { customRender: "remark" }
        },
        {
          title: "Action",
          dataIndex: "tableAction",
          scopedSlots: { customRender: "tableAction" },
          align: "right"
        }
      ],
      spinning: false,
      tableData: [],
      jobSeekerName: "",
      sourceType: undefined,
      total: 0,
      pageNo: 1,
      pageSize: 20,
      mjson: {},
      n1: require("@/assets/recruitment/n.png"),
      n2: require("@/assets/recruitment/n2.png"),
      selectedRowKeys: []
    };
  },
  created() {
    this.$store.commit("recruitment/isCancel", null);
    if (this.$route.query.status) {
      this.status = this.$route.query.status;
      this.pageRecruitInfoId = this.$route.query.recruitInfoId;
    }
    this.init();
  },
  methods: {
    moment,
    init() {
      this.jobSeekerName = "";
      this.sourceType = undefined;
      this.total = 0;
      this.pageNo = 1;
      this.pageSize = 20;
      this.selectedRowKeys = [];
      this.onGetPageJobSeekerByStatus();
    },
    async onGetPageJobSeekerByStatus() {
      try {
        this.spinning = true;
        const { data } = await getPageJobSeekerByStatus({
          recruitInfoId: this.pageRecruitInfoId,
          status: this.status,
          jobSeekerName: this.jobSeekerName,
          sourceType: this.sourceType ? this.sourceType : "",
          pageNo: this.pageNo,
          pageSize: this.pageSize
        });
        this.tableData = data.entities;
        this.tableData.forEach((e) => {
          if (e.skill) e.skill = e.skill.split(",");
        });
        this.total = data.entityCount;
        setTimeout(() => (this.spinning = false), 500);
      } catch (err) {
        console.log("error log --> ", err);
        this.tableData = [];
        this.total = 0;
        setTimeout(() => (this.spinning = false), 500);
      }
    },
    callback(e) {
      this.status = e;
      this.init();
    },
    getColumns() {
      this.$nextTick(() => {
        this.columns = [
          {
            title: "名次",
            dataIndex: "name",
            scopedSlots: { customRender: "name" }
          },
          {
            title: "Action",
            dataIndex: "tableAction",
            scopedSlots: { customRender: "tableAction" },
            align: "right"
          }
        ];
        if (this.status === "1") {
          const j = {
            title: "备注",
            dataIndex: "remark",
            scopedSlots: { customRender: "remark" }
          };
          this.columns.splice(1, 0, j);
        }
        if (this.status === "2") {
          const j = {
            title: "备注",
            dataIndex: "remark2",
            scopedSlots: { customRender: "remark2" }
          };
          this.columns.splice(1, 0, j);
        }
        if (this.status === "3") {
          const j = {
            title: "备注",
            dataIndex: "remark3",
            scopedSlots: { customRender: "remark3" }
          };
          this.columns.splice(1, 0, j);
        }
        if (this.status === "4") {
          const j = {
            title: "评价",
            dataIndex: "remark4",
            scopedSlots: { customRender: "remark4" }
          };
          this.columns.splice(1, 0, j);
        }
        if (this.status === "5") {
          const j = {
            title: "原因",
            dataIndex: "interviewEvaluation",
            scopedSlots: { customRender: "interviewEvaluation" }
          };
          this.columns.splice(1, 0, j);
        }
      });
    },
    onPageChange(page) {
      this.pageNo = page;
      this.selectedRowKeys = [];
      this.onGetPageJobSeekerByStatus();
    },
    onPageSizeChange(current, pageSize) {
      this.pageNo = 1;
      this.pageSize = pageSize;

      this.onGetPageJobSeekerByStatus();
    },
    onAddPeople() {
      this.$router.push({ name: "peopleAdd" });
    },
    async onPutDeliverRecords(status, recruitInfoId, companyUnitsId) {
      try {
        await putDeliverRecords({
          companyUnitsId,
          status,
          id: recruitInfoId
        });
        this.$notification.success({ message: "操作成功" });
        this.onGetPageJobSeekerByStatus();
      } catch (err) {
        console.log("error log --> ", err);
      }
    },
    onCloseInterview() {
      this.onPutDeliverRecords(9, this.deliverRecordId, this.companyUnitsId);
    },
    onAction(status) {
      this.onPutDeliverRecords(status, this.deliverRecordId, this.companyUnitsId);
      this.drawerVisible = false;
    },
    deleteRecord(deliverRecordId, companyUnitsId) {
      let s = 5;
      if (this.status === "3") s = 8;
      if (this.status === "2") s = 7;
      this.onPutDeliverRecords(s, deliverRecordId, companyUnitsId);
    },
    onInterview(deliverRecordId, companyUnitsId) {
      this.onPutDeliverRecords(4, deliverRecordId, companyUnitsId);
    },
    againRecord(deliverRecordId, companyUnitsId) {
      this.onPutDeliverRecords(1, deliverRecordId, companyUnitsId);
    },
    onAdd(e) {
      this.deliverRecordId = e.deliverRecordId;
      this.talentPoolId = e.talentPoolId;
      this.interviewVisible = true;
      this.mjson = {
        talentPoolId: e.talentPoolId,
        companyUnitsName: e.companyUnitName,
        recruitInfoName: e.postName,
        companyUnitsId: e.companyUnitId,
        recruitInfoId: e.recruitInfoId
      };
    },
    onMsg(e) {
      this.deliverRecordId = e.deliverRecordId;
      this.interviewId = e.interviewId;
      this.recruitInfoId = e.recruitInfoId;
      this.companyUnitsId = e.companyUnitId;
      this.statusMsg = String(e.status);
      this.info = {
        name: e.name,
        address: e.address,
        avatar: e.avatar,
        gender: e.gender,
        qrCodeUrlV: e.interviewQrCode
      };
      this.interviewMsgVisible = true;
    },
    onShare(e) {
      this.qrCodeUrlV = e.qrCodeUrl;
      this.onGetPageJobSeekerByStatus();
      this.visibles = true;
      this.drawerVisible = false;
    },
    rowclick(record) {
      this.talentPoolId = record.talentPoolId;
      this.companyUnitsId = record.companyUnitId;
      this.recruitInfoId = record.recruitInfoId;
      this.deliverRecordId = record.deliverRecordId;
      this.companyUnitsInfo = {
        companyUnitId: record.companyUnitId,
        postName: record.postName,
        companyUnitName: record.companyUnitName,
        activeDelivery: record.activeDelivery,
        cityName: record.cityName,
        sourceId: record.sourceId,
        sourceType: record.sourceType,
        recruitInfoId: record.recruitInfoId
      };
      this.mjson = {
        talentPoolId: record.talentPoolId,
        companyUnitsName: record.companyUnitName,
        recruitInfoName: record.postName,
        companyUnitsId: record.companyUnitId,
        recruitInfoId: record.recruitInfoId
      };
      this.drawerVisible = true;
    },
    onEvaluate(e) {
      this.evaluateId = e;
      this.evaluateVisible = true;
    },
    rowClass() {
      return "rowClassNamePeople";
    },
    handleChange() {
      this.pageNo = 1;
      this.selectedRowKeys = [];
      this.onGetPageJobSeekerByStatus();
    },
    onSearch() {
      this.pageNo = 1;
      this.selectedRowKeys = [];
      this.onGetPageJobSeekerByStatus();
    },
    onNote() {
      this.noteVisible = true;
    },
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
    },
    rkFun(e) {
      return e.deliverRecordId;
    },
    onNoteAll() {
      this.noteVisible = true;
    }
  }
};
</script>

<style lang="scss" scoped>
.ant-list-item-meta-description {
  width: 99%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tdisplay {
  display: flex;
  position: relative;
}
::v-deep .rowClassNamePeople {
  border: 1px solid #e8e8e8;
  margin-bottom: 24px;
  height: 126px;
  display: flex;
  width: calc(100vw - 292px);
  td {
    border: 0 !important;
    &:nth-child(1) {
      width: 30%;
    }
    &:nth-child(2) {
      padding-top: 50px;
      width: 11%;
    }
    &:nth-child(3) {
      padding-top: 50px;
      width: 12%;
    }
    &:nth-child(4) {
      padding-top: 50px;
      width: 15%;
    }
    &:nth-child(5) {
      // width: 29%;
      width: 32%;
    }
  }
}

.r-people-box {
  padding: 0 24px 24px 24px;
  ::v-deep.ant-tabs-tab {
    line-height: 60px;
    padding-top: 0px;
    height: 60px;
  }
  ::v-deep .ant-tabs-bar {
    margin-bottom: 24px !important;
  }
  ::v-deep .ant-table-thead {
    // display: none;
    th {
      background: #fff;
      border: 0;
      &:nth-child(n + 2) {
        display: none;
      }
    }
    .ant-table-selection-column {
      display: block;
      & > div {
        position: absolute;
        left: 0;
        top: 13px;
      }
      & > span {
        display: block !important;
        height: 17px;
        line-height: 17px;
        border: 0 !important;
      }
    }
  }
  ::v-deep .ant-table-row-level-0 {
    position: relative;
  }
  ::v-deep .ant-table-row-hover > td {
    background: #fff !important;
  }

  .table-name {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40px;
    line-height: 40px;
    background: #f5f5f5;
    color: #767885;
    z-index: 3;
    padding-left: 24px;
  }
  .tdisplay {
    .l {
      min-width: 160px;
      float: left;
      margin-right: 16px;
    }
    .tags {
      float: left;
      display: flex;
      position: absolute;
      right: 0;
      top: 33px;
      .tags-item {
        padding: 0 8px;
        height: 22px;
        line-height: 22px;
        margin-right: 8px;
        background: rgba(0, 0, 0, 0.04);
        border-radius: 2px;
        border: 1px solid rgba(0, 0, 0, 0.15);
        box-sizing: border-box;
      }
    }
  }
  .table-desc {
    height: 88px;
    padding-top: 44px;
    line-height: 44px;
    color: #767885;
    .title-s-j {
      display: inline-block;
      width: 46px;
      height: 20px;
      line-height: 20px;
      text-align: center;
      border-radius: 2px;
      border: 1px solid #4686ff;
      color: #4686ff;
      font-size: 10px;
      margin: 0 8px;
    }
    .title-s-n {
      display: inline-block;
      width: 36px;
      height: 20px;
      line-height: 20px;
      text-align: center;
      border-radius: 2px;
      border: 1px solid #32ccaa;
      color: #32ccaa;
      font-size: 10px;
      margin: 0 8px;
    }
  }
  .table-desc2 {
    line-height: normal;
    text-align: left;
    padding-top: 54px;
    text-indent: -40px;
    margin-left: 40px;
  }
  .v-center {
    height: 100px;
    background: #f5f5f5;
  }
  .pt10 {
    padding-top: 10px;
  }
}
.overflowsPeople {
  vertical-align: bottom;
  display: inline-block;
  max-width: 350px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 12px;
}
.overflowsRemak {
  vertical-align: bottom;
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 12px;
}
.overflowsName {
  vertical-align: bottom;
  display: inline-block;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.overCreate {
  // vertical-align: bottom;
  // display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.overflowsTags {
  max-width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
